/*flex布局*/
.flex{display: flex;display: -webkit-flex;}
/*水平轴是主轴 垂直轴是交叉轴*/
/*单根主轴方向*/
.fd-r{flex-direction: row;}
.fd-rr{flex-direction: row-reverse;}
.fd-c{flex-direction: column;}
.fd-cr{flex-direction: column-reverse;}
/*单根换行*/
.fw-n{flex-wrap: nowrap;}
.fw-w{flex-wrap: wrap;}
.fw-wr{flex-wrap: wrap-reverse;}
/*单根主轴对齐方式*/
.jc-fs{justify-content: flex-start;}
.jc-fe{justify-content: flex-end;}
.jc-c{justify-content: center;}
.jc-sb{justify-content: space-between;}
.jc-fs{justify-content: space-around;}
/*单根交叉轴对齐方式*/
.ai-fs{align-items: flex-start;}
.ai-fe{align-items: flex-end;}
.ai-c{align-items: center;}
.ai-b{align-items: baseline;}
.ai-s{align-items: stretch;}
/*多根交叉轴对齐方式*/
/*父层配合fd-r,fw-w。子层配合width:100%。使用*/ 
.ac-fs{align-content: flex-start;}
.ac-fe{align-content: flex-end;}
.ac-c{align-content: center;}
.ac-sb{align-content: space-between;}
.ac-sa{align-content: space-around;}
.ac-s{align-content: stretch;} 
/*item属性*/
/*项目宽高分配比例*/
html,body{height:100%;position: relative;}
*{margin: 0;padding: 0;box-sizing: border-box;}
li{list-style: none;}
a{text-decoration: none;}
/*--------------------------------*/
.fg-1{flex-grow: 1;}
.wrap{}
.wrap img{width:100px;height:60px;}
.picPop{width:100%;height:100%;position: fixed;top:0;left:0;display: none;}
.layer{width:100%;height:100%;background: rgba(0,0,0,.5);z-index: 10;}
.picPop img{width:500px;height:300px;display: block;z-index: 20;position: absolute;margin: auto;left:0;right:0;top:0;bottom: 0;border:1px solid #635656;}
.picPop img{}